<span class="devui-form-span" [ngClass]="{ 'devui-required': required }">
  <ng-content></ng-content>
</span>
<svg
  *ngIf="hasHelp"
  dPopover
  [content]="helpTipsTemplate"
  [popType]="'info'"
  [position]="'top'"
  [controlled]="true"
  trigger="hover"
  class="devui-helping"
  width="16px"
  height="16px"
  viewBox="0 0 16 16"
>
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g>
      <path
        d="M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763 7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305 9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575 6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814 9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z"
        fill="#293040"
        fill-rule="nonzero"
      ></path>
    </g>
  </g>
</svg>
<svg *ngIf="feedbackStatus === 'error'" class="devui-icon devui-icon-error" width="16px" height="16px" viewBox="0 0 16 16">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <circle cx="8" cy="8" r="7"></circle>
    <path
      d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z"
      fill-rule="nonzero"
    ></path>
  </g>
</svg>
<ng-template #helpTipsTemplate>
  <span class="devui-help-tips">{{ helpTips }}</span>
</ng-template>
